import React, { Component } from 'react'
import { withRouter, Link, Switch, Route, HashRouter as Router } from 'react-router-dom'
import { Layout, Menu, Icon, Input, Dropdown } from 'antd';
import '../../static/routineMonitoring/banner.less'
import Wechat from './component/wechat'
import Friendqun from './component/friendqun'
import Gongzhong from './component/gongzhong'
import CollectionPoint from './component/collectionPoint'
import Whole from '../tero/whole.jsx'
import RoundBar from '../tero/round_bar.jsx'
import Tapp from '../tero/app_nav.jsx'
import SearchEngines from '../tero/search_engines.jsx'
import Social from '../tero/blogs.jsx'
import Betan from '../tero/post_bar.jsx'
import AppTable from '../tero/app_table.jsx'
import hot from '../tero/hot.jsx'
import facebook from './component/facebook'
import twitter from './component/twitter'
import instagram from './component/instagram'
import other from './component/other'
const { Header, Sider, Content } = Layout;

class Weixinqun extends Component {
  constructor(props) {
    super(props)
    this.state = {
      index: Number(localStorage.getItem("cgkey")) || 0,
      index2: Number(localStorage.getItem("weixinkey")) || 0,
      listOne: [
        {
          title: '微信群',
          morenImg: require('../../static/image/wx.png'),
          overImg: require('../../static/image/wx2.png'),
        },
        {
          title: '朋友圈',
          morenImg: require('../../static/image/pyq.png'),
          overImg: require('../../static/image/pyq2.png'),
        },
        {
          title: '公众号',
          morenImg: require('../../static/image/gzh.png'),
          overImg: require('../../static/image/gzh2.png'),
        },
        {
          title: '采集点管理',
          morenImg: require('../../static/image/caiji.png'),
          overImg: require('../../static/image/caiji2.png'),
        }, {
          title: '全部',
          morenImg: require('../../static/image/all.png'),
          overImg: require('../../static/image/all2.png'),
        }
        , {
          title: '新闻',
          morenImg: require('../../static/image/new.png'),
          overImg: require('../../static/image/new2.png'),
        }, {
          title: '论坛',
          morenImg: require('../../static/image/lun (2).png'),
          overImg: require('../../static/image/lun2.png'),
        }, {
          title: '平台媒体',
          morenImg: require('../../static/image/mei.png'),
          overImg: require('../../static/image/mei2.png'),
        }, {
          title: '博客',
          morenImg: require('../../static/image/bo (2).png'),
          overImg: require('../../static/image/bo2.png'),
        }, {
          title: '贴吧',
          morenImg: require('../../static/image/tie.png'),
          overImg: require('../../static/image/tie2.png'),
        }, {
          title: '外文网站',
          morenImg: require('../../static/image/wai (2).png'),
          overImg: require('../../static/image/wai2.png'),
        }, {
          title: '热点',
          morenImg: require('../../static/image/re.png'),
          overImg: require('../../static/image/re2.png'),
        }, {
          title: 'Facebook',
          morenImg: require('../../static/image/facebook.png'),
          overImg: require('../../static/image/facebook2.png'),
        }
        , {
          title: 'Twitter',
          morenImg: require('../../static/image/Twitter-Icon.png'),
          overImg: require('../../static/image/TwitterIcon2.png'),
        }, {
          title: 'Instagram',
          morenImg: require('../../static/image/instagram.png'),
          overImg: require('../../static/image/instagram2.png'),
        }, {
          title: '其他网站',
          morenImg: require('../../static/image/qt.png'),
          overImg: require('../../static/image/qt2.png'),
        }
      ],
      over: false,
      overIndex: null
    }
  }
  onChange(num) {
    this.setState({
      index: num,
      index2: num
    })
    localStorage.setItem("cgkey", num)
    localStorage.setItem("weixinkey", num)
    switch (num) {
      case 0:
        this.goRouter('/weixinqun/wechat')
        break;
      case 4:
        this.goRouter('/weixinqun/whole')
        break;
      case 12:
        this.goRouter('/weixinqun/facebook')
        break;
    }
  }

  goRouter(d) {
    this.props.history.push(d)
  };

  onSelect(num) {
    this.setState({
      index2: num,
    })
    localStorage.setItem("weixinkey", num)
    switch (num) {
      case 0:
        return this.goRouter('/weixinqun/wechat')
      case 1:
        localStorage.removeItem('peopleId')
        return this.goRouter('/weixinqun/friendqun')
      case 2:
        return this.goRouter('/weixinqun/gongzhong')
      case 3:
        return this.goRouter('/weixinqun/collectionPoint')
      case 4:
        this.goRouter('/weixinqun/whole')
        break;
      case 5:
        this.goRouter('/weixinqun/roundBar')
        break;
      case 6:
        this.goRouter('/weixinqun/journalism')
        break;
      case 7:
        this.goRouter('/weixinqun/searchEngines')
        break;
      case 8:
        this.goRouter('/weixinqun/social')
        break;
      case 9:
        this.goRouter('/weixinqun/betan')
        break;
      case 10:
        this.goRouter('/weixinqun/appTable')
        break;
      case 11:
        this.goRouter('/weixinqun/hot')
        break;
      case 12:
        this.goRouter('/weixinqun/facebook')
        break;
      case 13:
        this.goRouter('/weixinqun/twitter')
        break;
      case 14:
        this.goRouter('/weixinqun/instagram')
        break;
      case 15:
        this.goRouter('/weixinqun/other')
        break;
      default:
    }
  }

  onOver(num) {
    this.setState({
      over: true,
      overIndex: num
    })
  }
  onOut() {
    this.setState({
      over: false
    })
  }
  render() {
    return (
      <div className='banner'>
        <div className="title">
          <div className='content'>
            <div className={this.state.index === 0 ? 'titelContent one titelContentactive' : 'titelContent one'} onClick={() => {
              this.onChange(0)
            }}>即时通讯</div>
            <div className={this.state.index === 4 ? 'titelContent two titelContentactive' : 'titelContent two'} onClick={() => {
              this.onChange(4)
            }}>境内</div>
            <div className={this.state.index === 12 ? 'titelContent three titelContentactive' : 'titelContent three'} onClick={() => {
              this.onChange(12)
            }}>境外</div>
            <span style={{ left: this.state.index == 0 ? "53px" : this.state.index == 4 ?  "251px" : "437px", width: this.state.index == 12 ? '98px' : "86px" }}></span>
          </div>
          {
            this.state.index === 0 ?
              <div className='smallTitle'>
                {
                  this.state.listOne.slice(0, 4).map((el, index) => {
                    return (
                      <div className={this.state.index2 === index ? 'titleWord active' : 'titleWord'}
                        onClick={this.onSelect.bind(this, index)}
                        onMouseOver={this.onOver.bind(this, index)}
                        onMouseOut={this.onOut.bind(this)}
                      >
                        {
                          this.state.over && this.state.overIndex === index && this.state.overIndex !== this.state.index2 ? <img src={el.overImg} /> : <img src={el.morenImg} />
                        }
                        {el.title}
                      </div>
                    )
                  })
                }
              </div>
              : this.state.index === 4 ?
                <div className='smallTitle'>
                  {
                    this.state.listOne.slice(4, 12).map((el, index) => {
                      return (
                        <div className={this.state.index2 === (index + 4) ? 'titleWord active' : 'titleWord'}
                          onClick={this.onSelect.bind(this, index + 4)}
                          onMouseOver={this.onOver.bind(this, index + 4)}
                          onMouseOut={this.onOut.bind(this)}
                        >
                          {
                            this.state.over && this.state.overIndex === (index + 4) && this.state.overIndex !== this.state.index2 ? <img src={el.overImg} /> : <img src={el.morenImg} />
                          }
                          {el.title}
                        </div>
                      )
                    })
                  }
                </div>
                :
                <div className='smallTitle'>
                  {
                    this.state.listOne.slice(12, 16).map((el, index) => {
                      return (
                        <div className={this.state.index2 === (index + 12) ? 'titleWord active' : 'titleWord'}
                          onClick={this.onSelect.bind(this, index + 12)}
                          onMouseOver={this.onOver.bind(this, index + 12)}
                          onMouseOut={this.onOut.bind(this)}
                        >
                          {
                            this.state.over && this.state.overIndex === (index + 12) && this.state.overIndex !== this.state.index2 ? <img src={el.overImg} /> : <img src={el.morenImg} />
                          }
                          {el.title}
                        </div>
                      )
                    })
                  }
                </div>
          }
        </div>
        <div className="changeStyle">
          <Content style={{ height: "100%", background: '#fff', position: "relative" }} ref="myInput">
            <Switch>
              <Route path='/weixinqun/wechat' component={Wechat} />
              <Route path='/weixinqun/friendqun' component={Friendqun} />
              <Route path='/weixinqun/gongzhong' component={Gongzhong} />
              <Route path='/weixinqun/collectionPoint' component={CollectionPoint} />
              <Route path='/weixinqun/whole' component={Whole} />
              <Route path='/weixinqun/roundBar' component={RoundBar} />
              <Route path='/weixinqun/journalism' component={Tapp} />
              <Route path='/weixinqun/searchEngines' component={SearchEngines} />
              <Route path='/weixinqun/social' component={Social} />
              <Route path='/weixinqun/betan' component={Betan} />
              <Route path='/weixinqun/appTable' component={AppTable} />
              <Route path='/weixinqun/hot' component={hot} />
              <Route path='/weixinqun/facebook' component={facebook} />
              <Route path='/weixinqun/twitter' component={twitter} />
              <Route path='/weixinqun/instagram' component={instagram} />
              <Route path='/weixinqun/other' component={other} />

            </Switch>
          </Content>
        </div>
      </div>
    )
  }
}

export default Weixinqun